<template>
    <div class="main">
        <a-form ref="formRef" :model="formData">
            <a-form-item field="name" label="合成活动名" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-input v-model="formData.name" placeholder="请输入合成活动名"></a-input>
            </a-form-item>
            <a-form-item field="cover" label="封面图" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <ma-upload v-model="formData.cover" title="封面图" type="image"></ma-upload>
            </a-form-item>
            <a-form-item field="stock" label="日期" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <a-range-picker showTime v-model="default_value" @change="change" />
            </a-form-item>
            <a-form-item label="所需" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <NeedModal ref="needRef" :data="formData.need" :select_list="select_list" @submit="change_data" />
            </a-form-item>
            <a-form-item label="所得" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <ListModal ref="listRef" :data="formData.income" :select_list="select_list" @submit="change_data" />
            </a-form-item>
            <a-form-item field="content" label="详情" label-col-flex="auto" :label-col-style="{ width: '85px' }">
                <MaEditor v-model="formData.content"></MaEditor>
            </a-form-item>
        </a-form>
    </div>
</template>
<script setup>
import { ref, shallowRef } from "vue";
import { Message } from "@arco-design/web-vue";
import NeedModal from "@/views/composer/components/NeedModal.vue";
import ListModal from "@/views/composer/components/ListModal.vue";
import purchase from '@/api/purchase'
import request from '@/api/composer'

const emit = defineEmits(["refreshList"]);

const props = defineProps({
    id: [String, Number]
});
const formData = ref({});

let default_value = ref([]);
const getDeta = async () => {
    let { data: { compose: data } } = await request.get_deta(props.id);
    let date = [data.start_date, data.end_date];
    default_value.value = date;
    formData.value = data;
};
props.id ? getDeta() : "";

const select_list = ref([]);
const get_select = async () => {
    let { data: { product: list } } = await purchase.get_select();
    select_list.value = list;
};
get_select();

const change = (time) => {
    formData.value.start_date = time[0];
    formData.value.end_date = time[1];
};

const needRef = shallowRef();
const listRef = shallowRef();
const change_data = (data) => {
    formData.value = {
        ...formData.value,
        ...data,
    };
};
const submit = async () => {
    needRef.value.get_data();
    listRef.value.get_data();
    await request.save(formData.value);
    Message.success("保存成功");
    setTimeout(() => emit("refreshList"), 500);
};
defineExpose({ submit });
</script>
<style scoped lang="less">
.main {
    height: 80vh;
}
</style>
